<template>
  <div class="score-list-wrapper">
    <a-card title="积分记录">
      <a-card-meta>
        <template #description>
          <p>欢迎你：{{ userInfo.username }}</p>
          <p>当前积分：{{ userInfo.score }}</p>
        </template>
      </a-card-meta>
      <a-table :loading="isLoading" :dataSource="scoreList" :columns="columns"></a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { getScoreList } from '@/api/score/index';
import store, { useUserInfoStore } from '@/store';
import { ScoreListItem } from '@/types/score/score';
import { UserInfo } from '@/types/user/user';
import { onMounted, ref } from 'vue';
const userStore = useUserInfoStore(store);
const userInfo = ref<UserInfo>(userStore.userInfo);
const scoreList = ref<ScoreListItem[]>([]);
const isLoading = ref(false);
const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
  },
  {
    title: '积分',
    dataIndex: 'score',
  },
  {
    title: '描述',
    dataIndex: 'description',
  },
  {
    title: '时间',
    dataIndex: 'createTime',
  },
];
onMounted(() => {
  if (userInfo.value.uid !== null) {
    getScoreList(userInfo.value.uid).then((res) => {
      isLoading.value = true;
      if (res) {
        scoreList.value = res.data;
      }
      isLoading.value = false;
    });
  }
});
</script>

<style lang="less" scope>
.score-list-wrapper {
  margin: 12px;
  min-height: calc(100vh - 136px);
  min-width: calc(100vw - 258px);
}
</style>
